<!-- TextBox.vue -->
<template>
  <div class="container">
    <div class="head_container">
      <div class="id_container">ID:{{ id }}</div>
      <div class="text_container">视频</div>
    </div>
    <div class="rich_text_container">
      <span style="width: 72px;height: 24px;color: #c4c4c4">视频路径:</span>
     <div class="upload_container">

       <el-upload  v-model:file-list="fileList"
                   action=""
                   :on-preview="handlePreview"
                   :on-remove="handleRemove"
                   :on-exceed="handleExceed"
                   :on-change="handleUpload"
                   :auto-upload="false"
                   class="elUploadContainer"
                   accept=".mp4,.avi,.mkv,.mov,.wmv,.flv,.webm,.mpg, .mpeg,.3gp,.ogv"
                   :limit="1">
         <div class="el-upload-list"></div>
         <div class="upload-button-container">
           <el-button type="primary" >请上传文件</el-button>
         </div>
       </el-upload>
     </div>
    </div>
    <div class="next_step">下一步:<input
      style="width: 550px;height: 50px;margin-left: 78px;background-color: #232323"
      v-model="nextStep"></input></div>
    <button class="saveButton" @click="handleSave()">保存</button>
  </div>
</template>

<script lang="ts" >
import {defineComponent, PropType} from 'vue';
import { ref,watch} from 'vue'
import type { UploadProps } from 'element-plus'
import {uploadFileApi} from "@/api/common";
export default defineComponent({
  name: 'VideoEditor',
  props: {
    id: {
      type: String as PropType<string>,
      default: "0000"
    },
    valueFromParent: {
      type: Object as PropType<Object>,
      required: true,
      default: {}
    },
  },
  emits: ['save'], // 定义自定义事件
  setup(props, {emit}) {
    const fileList = ref(props.valueFromParent.moduleValue.value)

    const handleRemove: UploadProps['onRemove'] = (uploadFile, uploadFiles) => {
    }

    const handlePreview: UploadProps['onPreview'] = (file) => {
    }


        const dataArray = ref([])
    const handleUpload = file=>{
      const formData = new FormData();
      formData.append("file", file.raw);
      // 调用上传的接口
      uploadFileApi(formData).then(res => {
          if (res.code === "0000") {
            dataArray.value =  [{
              name:file.raw.name,
              url: res.data
            }]
          }
        }).catch(err => {
          console.log("上传图片失败::::" + err);
        });
    }

    const handleExceed: UploadProps['onExceed'] = (file) => {
      fileList.value=[]
      dataArray.value=[]
      const formData = new FormData();
      formData.append("file", file[0]);

      // 调用上传的接口
      uploadFileApi(formData).then(res => {
        if (res.code === "0000") {
          dataArray.value =  [{
            name:file[0].name,
            url: res.data,
          }]
          fileList.value = dataArray.value
        }
      }).catch(err => {
        console.log("上传图片失败::::" + err);
      });
    }


    const submitUpload = () => {
      uploadFiles.value!.submit()
    }
    const handleSave = () => {
      props.valueFromParent.moduleNext = nextStep.value
      // props.valueFromParent.moduleValue = uploadFiles.value
      props.valueFromParent.moduleValue.value =dataArray.value
      const updatedContent = {...props.valueFromParent};
      emit('save', updatedContent); // 触发save事件并传递
    };
    const defaultNextId = props.id.split("-")[0]+"-"+ (Number(props.id.split("-")[1])+1)
    // 内容 HTML
    const nextStep = ref(props.valueFromParent?.moduleNext?props.valueFromParent?.moduleNext:defaultNextId)


    watch(()=>props.valueFromParent,(newVal)=>{
      nextStep.value =  newVal.moduleNext
      fileList.value =  newVal.moduleValue.value
    },{deep:true})



    return {
      nextStep,
      handleSave,
      handleExceed,
      submitUpload,
      handleRemove,
      handlePreview,
      fileList,
      handleUpload
    };
  }
});
</script>
<style>
.el-upload-list{
  border: #8769f1 1px;
  margin-left: 65px;
}
.el-upload-list {
  list-style: none;
  margin: -57px 0 0;
  padding: 17px;
  position: absolute;
  width: 300px;
  height: 50px;
}
</style>

<style scoped>
.elUploadContainer{
  border: #0bdcb7 0px solid;
  background-color: #232323;
  border-radius: 10px;
  width: 544px;
  height: 50px;
  margin-left: 56px;
  justify-content: space-between;
  .upload-button-container{
    margin-left: 350px;
    margin-bottom: 12px;
  }
}


.rich_editor_menu {
  width: 544px;
  margin-left: 197px;
}

.rich_editor_container {
  width: 544px;
  height: 119px;
  margin-left: 58px;
}

.rich_text_container {
  display: flex;
  width: 680px;
  height: 119px;
  margin-left: 66.5px;
  margin-top: 10px;
}

.next_step {
  display: flex;
  margin-left: 66.5px;
  margin-top: 30px;
  color: #c4c4c4;
}

.head_container {
  width: 811px;
  height: 55px;
  background-color: #525252;
  display: flex;
  align-items: center;

  .id_container {
    width: 75px;
    height: 25px;
    color: #a3a3a3;
    margin-left: 20px;
    margin-right: 298.5px;
  }

  .text_container {
    width: 44px;
    height: 30px;
  }
}

.container {
  width: 811px;
  height: 644.7px;
  background-color: #383838;
}

textarea {
  width: 100%;
  box-sizing: border-box;
}

.saveButton {
  height: 60px;
  width: 671px;
  background-color: #ff8d1a;
  color: #78491b;
  margin-left: 66.5px;
  margin-top: 200px;
  border-radius: 10px;
}

html.dark {
  --w-e-textarea-bg-color: #333;
  --w-e-textarea-color: #fff;
}

.image-upload {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.custom-file-upload {
  display: inline-block;
  padding: 6px 12px;
  cursor: pointer;
  background-color: #f0f0f0;
  border-radius: 4px;
  margin-bottom: 10px;
}

#file-upload {
  display: none;
}

.image-preview img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}

.image-info {
  margin-top: 10px;
  text-align: center;
}

button {
  background-color: #ff8d1a;
  border: none;
  padding: 10px 20px;
  color: white;
  cursor: pointer;
  border-radius: 4px;
  margin-top: 10px;
}

button:hover {
  background-color: #e67e22;
}

</style>
